<template>
  <div class="fifth-tab1">
    <h3>系统自设字段设置</h3>
    <el-table style="margin-top: 10px" border stripe :data="topTable" v-loading="topLoading">
      <el-table-column prop="field" label="字段名称">
        <template #default="{ row }">
          <span>
            {{ row.field }}
          </span>
          <span v-if="row.page_num == 1"> &nbsp; &nbsp; &nbsp;(默认必选) </span>
        </template>
      </el-table-column>
      <el-table-column label="显示名称">
        <template #default="{ row }">
          <span>
            {{ row.name }}
          </span>
          <el-icon class="icon" @click="editNameFun(row)">
            <IEpEdit />
          </el-icon>
        </template>
      </el-table-column>

      <el-table-column label="排序" width="90" align="center">
        <template #default="{ row }">
          <el-input v-model="row.sort" @blur="updateFieldFun(row, 'sort')" />
        </template>
      </el-table-column>

      <el-table-column label="基本信息" width="90" align="center">
        <template #default="{ row }">
          <el-checkbox :true-label="1" :false-label="0" v-model="row.is_base" size="large" :disabled="row.page_num == 1"
            @change="statusFun(row, 'is_base')" />
        </template>
      </el-table-column>
      <el-table-column label="列表显示" width="90" align="center">
        <template #default="{ row }">
          <el-checkbox :true-label="1" :false-label="0" v-model="row.in_list" size="large"
            @change="statusFun(row, 'in_list')" />
        </template>
      </el-table-column>
      <el-table-column label="表单启用" width="90" align="center">
        <template #default="{ row }">
          <el-checkbox :disabled="row.page_num == 1 ? true : false" :true-label="1" :false-label="0"
            v-model="row.in_form" size="large" @change="statusFun(row, 'in_form')" />
        </template>
      </el-table-column>
      <el-table-column label="表单必填" width="90" align="center">
        <template #default="{ row }">
          <el-checkbox :disabled="row.page_num == 1 ? true : false" :true-label="1" :false-label="0"
            v-model="row.is_null" size="large" @change="statusFun(row, 'is_null')" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 名称修改 -->
    <el-dialog v-model="nameVisible" title="显示名称修改" width="20%">
      <div>
        <el-form ref="ruleFormRef" :model="ruleForm">
          <el-form-item label="显示名称" prop="name" :rules="[{ required: true, message: '显示名称' }]">
            <el-input v-model="ruleForm.name" placeholder="显示名称" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="nameVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitFun"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--  -->
    <div class="title-box">
      <h3 style="margin-top: 20px">自定义字段设置</h3>
      <div>
        <el-button type="primary" @click="addFun('add')"> 添加 </el-button>
      </div>
    </div>
    <el-table style="margin-top: 10px" border stripe :data="bottomTable" v-loading="bottomLoading">
      <el-table-column prop="field" label="字段名称" />
      <el-table-column prop="name" label="显示名称" />
      <el-table-column prop="form_type" label="字段类型">
        <template #default="{ row }">
          <el-tag v-if="row.form_type == 'radio'">单选</el-tag>
          <el-tag v-else-if="row.form_type == 'checkbox'">多选</el-tag>
          <el-tag v-else-if="row.form_type == 'select'">下拉框</el-tag>
          <el-tag v-else-if="row.form_type == 'text'">单行文本</el-tag>
          <el-tag v-else-if="row.form_type == 'textarea'">多行文本</el-tag>
          <el-tag v-else-if="row.form_type == 'pic'">图片</el-tag>
          <el-tag v-else-if="row.form_type == 'date'">日期</el-tag>
          <el-tag v-else-if="row.form_type == 'datetime'">日期时间</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="default_value" label="默认值" />
      <el-table-column label="排序" width="90" align="center">
        <template #default="{ row }">
          <el-input v-model="row.sort" @blur="updateFieldFun(row, 'sort')" />
        </template>
      </el-table-column>

      <el-table-column label="基本信息" width="90" align="center">
        <template #default="{ row }">
          <el-checkbox :true-label="1" :false-label="0" v-model="row.is_base" size="large" :disabled="row.page_num == 1"
            @change="statusFun(row, 'is_base')" />
        </template>
      </el-table-column>
      <el-table-column label="列表显示" width="90" align="center">
        <template #default="{ row }">
          <el-checkbox :true-label="1" :false-label="0" v-model="row.in_list" size="large" disabled />
        </template>
      </el-table-column>
      <el-table-column label="表单启用" width="90" align="center">
        <template #default="{ row }">
          <el-checkbox :true-label="1" :false-label="0" v-model="row.in_form" size="large" disabled />
        </template>
      </el-table-column>
      <el-table-column label="表单必填" width="90" align="center">
        <template #default="{ row }">
          <el-checkbox :true-label="1" :false-label="0" v-model="row.is_null" size="large" disabled />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button type="primary" link @click="updateDeptFun(row)">
            编辑
          </el-button>
          <el-button type="danger" link @click="delFun(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <addDialog ref="addDialogRef" @refreshList="refreshList" />
</template>
<script setup>
import {
  customerApi,
  stateApi,
  deleteApi,
  updateField
} from "@/plugins/api/customer/setup/fifth";
import addDialog from "./DialogFifth-tab1.vue";
// 上
let topTable = ref([]);
let topLoading = ref(false);
function getTopData() {
  topLoading.value = true;
  customerApi({
    is_sys: 1,
  })
    .then((data) => {
      topTable.value = data;
      topLoading.value = false;
    })
    .catch(() => {
      topLoading.value = false;
    });
}
// 下
let bottomTable = ref([]);
let bottomLoading = ref(false);
function getBottomData() {
  bottomLoading.value = true;
  customerApi({
    is_sys: 0,
  })
    .then((data) => {
      bottomTable.value = data;
      bottomLoading.value = false;
    })
    .catch(() => {
      bottomLoading.value = false;
    });
}
function statusFun(row, name) {
  let obj = {
    field_id: row.field_id,
    field: name,
    status: row[name],
  };
  stateApi(obj).then(() => {
    ElMessage.success("修改成功！");
    getTopData();
    getBottomData();
  });
}
function updateFieldFun(row, name) {
  let obj = {
    field_id: row.field_id,
    field: name,
    value: row[name],
  };
  updateField(obj).then(() => {
    ElMessage.success("修改成功！");
    getTopData();
  });
}
// 显示名称修改
let nameVisible = ref(false);
function editNameFun(row) {
  ruleForm.value = Object.assign({}, row);

  nameVisible.value = true;
}
let ruleForm = ref({});
let ruleFormRef = ref(null);
function submitFun() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      let obj = {};
      obj.field_id = ruleForm.value.field_id;
      obj.field = "name";
      obj.status = ruleForm.value.name;
      stateApi(obj).then(() => {
        ElMessage.success("修改成功！");
        nameVisible.value = false;
        getTopData();
      });
    }
  });
}
function delFun(row) {
  ElMessageBox.confirm("确认删除，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteApi({
        field_id: row.field_id,
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        getBottomData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
//增加
let addDialogRef = ref(null);
function addFun() {
  addDialogRef.value.initFun("add");
}
function refreshList() {
  getBottomData();
}
function updateDeptFun(row) {
  addDialogRef.value.initFun("update", row);
}
//
onMounted(() => {
  getTopData();
  getBottomData();
});
</script>
<style lang="scss" scoped>
.fifth-tab1 {
  width: 100%;
  height: calc(100vh - 270px);
  overflow: auto;

  h3 {
    margin: 0;
  }

  .title-box {
    display: flex;
    justify-content: space-between;

    >div {
      align-self: flex-end;
      margin-right: 10px;
    }
  }

  .icon {
    color: rgb(42, 86, 231);
    margin-left: 10px;
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
